<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="210" class="app-sidebar">
        <logo :elMenuCollapse="elMenuCollapse"/>
        <el-menu
          ref="meun"
          class="el-menu-vertical-demo"
          :default-active="defaultActive"
          :collapse="elMenuCollapse"
          background-color="#192A5E"
          text-color="rgba(196,201,210,1)"
          active-text-color="#1890ff"
          :router="true"
        >
          <menu-tree v-for="item in sidebarList" :key="item.id" :item="item"></menu-tree>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="right">
            <el-icon @click="handleFullScreen" style="margin-right:10px">
              <full-screen/>
            </el-icon>
            <div class="user">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <div class="nav-avatar">
                    <img style="width:100%" :src="defaultAvatar" alt="头像">
                  </div>
                </span>
                <template v-slot:dropdown>
                  <el-dropdown-menu class="user-box">
                    <ul class="dropdown-box">
                      <li class="password" @click="goToCenter">
                        <i class="iconfont icon-weibaoxitongshangchuanlogo-"></i>
                        <span>个人中心</span>
                      </li>
                      <li class="account" @click="outLogin">
                        <i class="iconfont icon-tuichu"></i>
                        <span>退出账户</span>
                      </li>
                    </ul>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer class="footer">
          京ICP备2023000612号-1
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Logo from "@/components/PcLogo.vue";
import MenuTree from "@/components/layout/MenuTree.vue";
import screenfull from "screenfull";
import defaultAvatar from "@/assets/img/user.png";
import { getMenuList } from "@/api/PC-Home.js"
export default {
  components: { Logo, MenuTree },
  computed: {
    elMenuCollapse() {
      return this.isCollapse;
    },
    /**
     * 根据当前路由设置激活侧边栏
     */
    defaultActive() {
      const route = this.$route;
      return route.path;
    }
  },
  data() {
    return {
      defaultAvatar,
      isCollapse: false,
      isFullscreen: false,
      sidebarList: [
        {
          id: "1",
          parentId: "0",
          indexSort: "1",
          indexTitle: "公司动态",
          path: "/companyDynamics",
          icon: ""
        }
      ]
    };
  },
  mounted() {
    this.getCookieDataLogin()
    this.init();
    this.getMenuList()
  },
  beforeUnmount() {
    this.destroy();
  },
  methods: {
    // 获取cookie内容
    getCookieDataLogin(){
      const cookieDataLogin = JSON.parse(sessionStorage.getItem('isLogin'))
      if(cookieDataLogin !== 1){
        this.$router.push('/login')
      }
    },
    changeSlidebarState() {
      this.isCollapse = !this.isCollapse;
    },
    handleFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen;
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on("change", this.change);
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off("change", this.change);
      }
    },
    getMenuList(){
      this.sidebarList = []
      getMenuList().then((res) => {
        console.log(res)
        this.sidebarList = res.data
        this.sidebarList.map((item,index) => {
          item.path = item.path?item.path:index+1
        })
      })
    },
    outLogin(){
      sessionStorage.removeItem('isLogin')
      this.getCookieDataLogin()
    }
  }
};
</script>
<style scoped lang="scss">
// ::-webkit-scrollbar {
//   width: 0px;
//   height: 0px;
// }

.common-layout {
  width: 100%;
  height: 100%;

  ::v-deep .el-container {
    width: 100%;
    height: 100%;

    .app-sidebar {
      background: #192a5e;

      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }
    }

    .header {
      padding: 0;
      background: #eef4f9;
      height: 86px !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0px 2px 6px 0px rgba(190, 204, 216, 0.4);
      border-bottom: 1px solid rgba(190, 204, 216, 0.4);

      .left {
        height: 100%;
        width: 100%;

        .operate {
          display: flex;
          align-items: center;
          background: #eef4f9;
          padding-left: 20px;
          height: 86px;

          .iconfont {
            font-size: 16px;
            font-weight: 500;
            color: #666666;
            cursor: pointer;
            transform: rotate(0deg);
            transition: all 0.3s linear;
            margin-right: 10px;

            &:hover {
              color: #3963bc;
            }
          }
        }
      }

      .right {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        .el-icon {
          font-size: 24px;
        }
      }
    }

    .el-main {
      overflow-y: auto;
      position: relative;
      padding: 20px;
    }
  }
}

.user {
  height: 40px;

  .el-dropdown-link {
    cursor: pointer;

    .nav-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
    }
  }
}

.user-box {
  width: 326px;
  background-color: none;
  background: transparent;
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;

  .user-info {
    background-image: url("../../assets/img/index-model-comprehensive.png");
    background-size: 100% 100%;
    transform: translateY(-10px);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    flex-direction: row;
    padding: 35px 20px 25px 30px;
    z-index: 100;
    position: relative;

    .corner {
      position: absolute;
      right: 18px;
      top: -9px;
      width: 27px;
      height: 10px;
    }

    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      cursor: pointer;
      overflow: hidden;
      position: relative;

      .mask {
        opacity: 0;
        transition: all 0.2s;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: white;

        input {
          display: none;
        }
      }

      &:hover {
        .mask {
          opacity: 1;
        }
      }
    }

    .text {
      margin-left: 20px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .username {
        margin-bottom: 10px;
        font-size: 16px;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
      }

      .desc {
        font-size: 14px;
        color: rgba(222, 226, 230, 1);
      }
    }

    .info {
      position: absolute;
      bottom: 10px;
      right: 10px;
      display: flex;
      color: #fff;
      font-size: 14px;
      height: 20px;
      line-height: 20px;

      .mid {
        padding: 0 5px;
      }
    }
  }

  .dropdown-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 35px;
    height: 122px;
    color: #596c8e;
    font-size: 14px;
    background: white;
    margin-top: -10px;

    li {
      cursor: pointer;

      &:nth-child(1) {
        margin-top: 20px;
      }

      &:nth-child(2) {
        margin-bottom: 20px;
      }

      i {
        margin-right: 10px;
      }

      &:hover {
        color: #3963bc !important;

        i {
          color: #3963bc !important;
        }
      }
    }
  }
}

.popper__arrow {
  display: none !important;
}

.avatar-croppa-container {
  display: inline-block;
  border-color: #3862bc;
  border-style: dashed;
  font-size: 0;
  border-width: 2px;
}
.footer{
  background: #eef4f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>